<template>
  <div>
    <van-search class="info_search input_text" v-model="value" @search="onSearch" @clear="clearSearch" placeholder="搜索">
    </van-search>
    <van-list v-bind:finished="myFinished" v-model="myLoading" finished-text="没有更多了" @load="myOnLoad">
      <van-cell class="card" @click="openDetail(item)" v-for="(item, index) in myList" v-bind:key="index">
        <div>
          <van-row>
            <van-col>
              <img class="icon" src="@/assets/Images/AppIcon/list_icon_template.png" />
              演练科目：{{ item.PlanSubject}}
            </van-col>
          </van-row>
          <van-row>
              <van-col>
                  <img class="icon" src="@/assets/Images/AppIcon/icon_list_group.png" />
                  组织单位：{{item.OrganizeUnit}} 
              </van-col>
          </van-row>
          <van-row>
              <van-col>
                    <img class="icon" src="@/assets/Images/AppIcon/icon_list_date.png" />
                    演练时间：{{item.PlanDate|formatDate}} 
              </van-col>
          </van-row>
          <van-row>
                <img class="icon" src="@/assets/Images/AppIcon/icon_progress.png" />
                    演练类型：{{item.PlanTypeName}}
          </van-row>
          <van-row>
              <van-col>
                   <img class="icon" src="@/assets/Images/AppIcon/icon_list_post.png" />
                  主持人：{{item.Moderator}}
              </van-col>
          </van-row>
           <van-row>
              <van-col>
                   <img class="icon" src="@/assets/Images/AppIcon/icon_list_post.png" />
                  创建人：{{item.CreateChnName}}
              </van-col>
          </van-row>
          <van-row>
              <van-col>
                       <img class="icon" src="@/assets/Images/AppIcon/icon_list_date.png" />
                    创建时间：{{item.CreateDate|formatDate}} 
              </van-col>
          </van-row>
        </div>
      </van-cell>
    </van-list>
  </div>
</template>
<script>
import { gxEmergencyPlanList } from "@/api/gx";
import { List } from "vant";
export default {
  data() {
    return {
      value: "",
      myList: [],
      myFilter: {
        page: 0,
        dataType: "List",
      },
      loading: false,
      finished: false,
      myLoading: false,
      myFinished: false,
    };
  },
  created() {
    this.getMyList();
  },
  methods: {
    onSearch() {
      var conditions1 = [];
      if (this.value) {
        conditions1.push({
          Name: "PlanSubject",
          DisplayName: this.value,
          Value: this.value,
          Operator: "like",
          DataType: "String",
        });
      }
      this.myFilter.page = 0;
      this.myFilter.conditions = JSON.stringify(conditions1);
      this.getMyList();
    },
    clearSearch() {
      this.myFilter = {
        page: 0,
        dataType: "List",
      };
      this.value = "";
      this.getMyList();
    },
    getMyList() {
      this.myLoading = true;
      gxEmergencyPlanList(this.myFilter).then((res) => {
        this.myLoading = false;
        if (!res.data.HasNextPage) {
          this.myFinished = true;
        }
        this.myList = res.data.Data;
        this.myFilter.page = res.data.PageIndex;
      });
    },
    myOnLoad() {
      this.myLoading = true;
      ++this.myFilter.page;
      list(this.myFilter).then((res) => {
        this.myLoading = false;
        this.myFilter.page = res.data.PageIndex;
        this.myList = this.myList.concat(res.data.Data);
        if (!res.data.HasNextPage) {
          this.myFinished = true;
        }
      });
    },
    openDetail(item) {
      this.$router.push({
        path: "/GxEmergencyPlanView",
        query: { id: item.ID },
      });
    }
  },
};
</script>
<style lang="less">
.info_search {
  padding: 10px;
  border-radius: 5px !important;
}
</style>